// 创建外壳组件app
import React,{Component} from "react";
import Header from './components/Hander'
import List from "./components/List";
import Footer from './components/Footer'
import './App.css'
// 状态在哪里，操作状态的方法就在哪里

export default class App extends Component{

  state = {todos:[
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:true},
    {id:'003',name:'打代码',done:false},
    {id:'004',name:'逛街',done:true},
  ]}

  // addTodo用于添加一个todo，接收的参数是todo对象
  addTodo = (todoObj)=>{
    // 获取元todos
    const {todos} = this.state
    // 追加一个todo
    const newTodos = [todoObj,...todos]
    // 更新状态
    this.setState({todos:newTodos})
  }

  // updateTodo用于更新一个todo对象
  updateTodo = (id,done)=>{
    // 获取状态中的todo
    const {todos} = this.state
    // 匹配处理数据
    
    var newTodes =todos.map((todoObj)=>{
      if(todoObj.id === id){
        // newTodes.push({...todoObj,done:done}) 
        return {...todoObj,done:done}
      }else{
        return todoObj
      }
    })
    this.setState({todos:newTodes})
  }

  // deleteTodo用于删除一个todo对象
  deleteTodo = (id)=>{
    // 获取原来的todos
    const {todos} = this.state
    // 删除指定id 的todo对象
    const newTodes = todos.filter(todoObj=>{
      return todoObj.id !== id
    })
    // 更新状态
    this.setState({todos:newTodes})
  }

  // checkAllTodo用于全选
  checkAllTodo = (done)=>{
    // 获取原来的todos
    const {todos} = this.state
    // 加工数据
    const newTodos =todos.map((todoObj)=>{
      return {...todoObj,done}
    })
    // 更新状态
    this.setState({todos:newTodos})
  }

  // clearAllDone用于清除所有已完成
  clearAllDone = ()=>{
    // 获取原来的todos
    const {todos} = this.state
    // 过滤数据
    const newTodos = todos.filter(todoObj=>{
      return !todoObj.done
    })
    // 更新状态
    this.setState({todos:newTodos})
  }

  render(){
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
        </div>
      </div>
    )
  }
}

